<template>
  <v-card fluid>
    <v-tabs
      v-model="tab"
      background-color="transparent"
      color="indigo"
      grow
    >
      <v-tab>
        {{ lanChar.topoViewTop }}
      </v-tab>
      <v-tab>
        {{ lanChar.topoViewGroup }}
      </v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">
      <v-tab-item>
        <apptpl-top-view
          :title="topViewTitle"
          :title-switch="true"
          div-id="g-es-view"
          :sub-view="tabView"
        />
      </v-tab-item>
      <v-tab-item v-if="tabView.groupView">
        <apptpl-group-view
          :title="groupViewTitle"
          :title-switch="true"
          div-id="g-e-view"
          :top-view="tabView"
          :gw-id="tabView.gwID"
          :group-id="tabView.groupID"
        />
      </v-tab-item>
    </v-tabs-items>
  </v-card>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import TopView from './apptpl/TopView.vue'
  import GroupView from './apptpl/GroupView.vue'

  export default {
    name: 'GraphApptpl',
    components: {
      'apptpl-top-view': TopView,
      'apptpl-group-view': GroupView,
    },
    props: {
    },
    data: () => ({
      lanChar: lan.GetLan(),
      tabView: {
        groupView: 0,
        topView: 0,
        gwID: 'init gwID',
        groupID: 'init groupID',
      },
      tab: 0,
      groupViewCnt: 0,
      topViewCnt: 0,
      topViewTitle: lan.GetLan().topViewTitle,
      groupViewTitle: lan.GetLan().groupViewTitle,
    }),
    computed: {
    },
    watch: {
      tabView: {
        handler (newValue, oldValue) {
          if (newValue.groupView !== this.groupViewCnt) {
            this.tab = 1
            this.groupViewCnt = newValue.groupView
          }
          if (newValue.topView !== this.topViewCnt) {
            this.tab = 0
            this.topViewCnt = newValue.topView
          }
        },
        deep: true,
      },
    },
    created () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
      })
    },
    mounted () {
    },
    beforeDestroy () {
    },
    methods: {
    },
  }
</script>
